<template>
  <div class="container">
    <div style="display: flex; height: 100%">
      <el-collapse-transition name="el-zoom-in-left">
        <div v-show="leftShow" class="left">
          <tree
            ref="treeComponent"
            @treeTableSelected="treeTableSelected"
            @tableData="toData"
            @sure="
              (e) => {
                getworkCar(e);
              }
            "
            @areaExportData="areaExportData"
          />

          <div @click="leftShow = !leftShow" class="leftBtn">
            <i class="el-icon-arrow-left"></i>
          </div>
        </div>
      </el-collapse-transition>
      <!-- 地图容器 -->
      <div
        class="mapBox"
        :class="{
          leftShow: leftShow == false,
          bottomShow: bottomShow == false,
        }"
        style="position: relative"
      >
        <!-- 地图 -->
        <div
          id="gdMap"
          style="height: 100%; width: 100%"
          v-if="nowMap == 1"
        ></div>
        <div style="height: 100%; width: 100%" v-if="nowMap == 2">
          <TMap
            ref="wolrdmap"
            :sContent="$refs.pop"
            :carFrame="carFrame"
            style="height: 100%; width: 100%"
          ></TMap>
        </div>

        <!-- 地图操作按钮 -->
        <div class="mapBtn-car" v-show="!isCompany">
          <el-button
            size="mini"
            type="primary"
            @click="carTypeBtn('21')"
            class="button"
            >工程车
          </el-button>
          <el-button
            size="mini"
            type="primary"
            @click="carTypeBtn('83')"
            class="button"
            >渣土车
          </el-button>
          <el-button
            size="mini"
            type="primary"
            @click="carTypeBtn('600,36')"
            class="button"
            >商混车
          </el-button>
          <el-button
            size="mini"
            type="primary"
            @click="carTypeBtn('')"
            class="button"
            >所有</el-button
          >
        </div>

        <div v-show="!isCompany" class="mapBtn-totle" style="cursor: pointer">
          <div class="car-num el-icon-truck" @click="getallCarNum(allCarNum)">
            <span>总数量:</span>
            <span>{{ allCarNum.length }}辆</span>
          </div>
          <div
            style="color: red; margin-left: 10px"
            class="car-num el-icon-truck"
            @click="getallCarNum(notWorkOtherNum)"
          >
            <span>当天待机数量:</span>
            <span>{{ notWorkOtherNum ? notWorkOtherNum.length : 0 }}辆</span>
          </div>
          <div
            style="color: green; margin-left: 10px"
            class="car-num el-icon-truck"
            @click="getallCarNum(workNum)"
          >
            <span>当天工作数量:</span>
            <span class="fwber">{{ workNum ? workNum.length : 0 }}辆</span>
          </div>
          <div
            style="color: #e6a23c; margin-left: 10px"
            class="car-num el-icon-truck"
            @click="getallCarNum(notWorkNum)"
          >
            <span>非当天未工作数量:</span>
            <span class="fwber"
              >{{ notWorkNum ? notWorkNum.length : 0 }}辆</span
            >
          </div>
        </div>

        <div style="position: absolute; left: 10px; bottom: 50px; z-index: 999">
          <el-button size="mini" @click="mapchoose(1)">高德地图</el-button>
          <div style="margin: 2px 0"></div>
          <el-button size="mini" @click="mapchoose(2)">天地图</el-button>
        </div>
      </div>
    </div>

    <el-collapse-transition name="el-zoom-in-bottom">
      <div v-show="bottomShow" class="bottom">
        <div v-if="isCompany">
          <companyTable
            ref="companyTable"
            @getBaseTableClicked="getBaseTableClicked"
          />
        </div>
        <div v-else>
          <areaTable
            ref="areaTable"
            @getAreaTableClicked="getAreaTableClicked"
          />
        </div>
        <div @click="bottomShow = !bottomShow" class="btnBox">
          <i class="el-icon-arrow-down"></i>
        </div>
      </div>
    </el-collapse-transition>

    <!-- 左侧隐藏后显示的按钮 -->
    <div
      @click="leftShow = !leftShow"
      v-if="leftShow == false"
      class="leftshowBtn flex-cener"
    >
      <span class="el-icon-arrow-right"></span>
    </div>

    <!-- 下面列表隐藏后显示的按钮 -->
    <div
      @click="bottomShow = !bottomShow"
      v-if="bottomShow == false"
      class="bottomBtn flex-cener"
    >
      <span class="el-icon-arrow-up"></span>
    </div>

    <!-- 地图打点弹窗 -->
    <div
      class="markerStyle"
      :style="{ width: popdata.showde ? '400px' : '180px' }"
      ref="pop"
    >
      <div class="markerStyleLeft">
        <p>车牌：{{ popdata.hbCarNo }}</p>
        <p>时间：{{ popdata.gpsTime }}</p>
        <div v-show="popdata.labelType == 1">
          <p>类型：{{ popdata.carTypeName }}</p>
          <p>品牌：{{ popdata.carBrandName }}</p>
          <p>型号：{{ popdata.carModelName }}</p>
        </div>
        <p>
          ACC：<dict-tag
            :options="dict.type.location_acc_status"
            :value="popdata.accState"
            style="display: inline-block; white-space: nowrap"
          />
        </p>
        <p>速度：{{ popdata.speed }}(km/h)</p>
        <p>油量：{{ popdata.oil }}</p>
        <p>里程：{{ popdata.mileage }}</p>
        <p>位置：{{ popdata.curAddress }}</p>
        <div class="btns">
          <div
            @click="trajectory()"
            style="width: 40px; margin: 0 anto; cursor: pointer"
          >
            <i class="el-icon-location-information fz22"></i>
            <p>轨迹</p>
          </div>
          <div
            @click="track()"
            style="width: 40px; margin: 0 anto; cursor: pointer"
          >
            <i class="el-icon-position fz22"></i>
            <p>跟踪</p>
          </div>
          <div
            @click="video()"
            style="width: 40px; margin: 0 anto; cursor: pointer"
          >
            <i class="el-icon-video-camera fz22"></i>
            <p>视频</p>
          </div>
          <div
            style="width: 40px; margin: 0 anto; cursor: pointer"
            id="showMore"
            @click="
              popdata.showde
                ? (popdata.showde = false)
                : (popdata.showde = true);
              $forceUpdate();
            "
            v-show="popdata.labelType == 1"
          >
            <i class="el-icon-arrow-right fz24 mt20"></i>
          </div>
        </div>
      </div>
      <div class="markerStyleRight" v-show="popdata.showde">
        <p>车 主：{{ popdata.ownerName }}</p>
        <p>车主电话：{{ popdata.ownerContact }}</p>
        <p>驾驶员：{{ popdata.driverName }}</p>
        <p>驾驶员电话：{{ popdata.driverContact }}</p>
        <p>操作证号：{{ popdata.driverCert }}</p>
        <p>发证机构：{{ popdata.certOrg }}</p>
      </div>
    </div>

    <!-- 轨迹弹窗 -->
    <trajectorys ref="trajectoryDialog" :toTraCode="toTraCode"></trajectorys>
    <!-- 定位跟踪弹窗 -->
    <tracking ref="trackingDialog" :toTraCode="toTraCode"></tracking>
    <!-- 视频弹窗 -->
    <videos ref="videosDialog" :toEditCode="toEditCode"></videos>
  </div>
</template>

<script>
import api from "@/api/location/positioning";
import tree from "./tree.vue";
import companyTable from "./companyTable.vue";
import areaTable from "./areaTable.vue";
import trajectorys from "./dialogTra.vue";
import tracking from "./dialogPos.vue";
import videos from "./dialogVideo.vue";
import TMap from "../../../components/WorldMap/tmap.vue";

export default {
  components: {
    tree,
    companyTable,
    areaTable,
    trajectorys,
    tracking,
    videos,
    TMap,
  },
  dicts: ["location_acc_status"],
  data() {
    return {
      leftShow: true,
      bottomShow: true,
      isCompany: true,
      popdata: { show: false, labelType: 1, showde: false },
      allCarNum: [],
      notWorkNum: [],
      notWorkOtherNum: [],
      workNum: [],

      toTraCode: 0,
      trajectoryShow: true,
      toEditCode: "",
      nowMap: 1,
    };
  },
  mounted() {
    this.initmap();
  },
  created() {},
  destroyed() {
    console.log("======定位销毁");
    localStorage.removeItem("companyTree");
    clearInterval(this.companyRound);
  },
  methods: {
    // 初始化地图
    initmap() {
      this.map = new AMap.Map("gdMap", {
        //设置地图容器id
        viewMode: "3D", //是否为3D地图模式
        zoom: 13, //初始化地图级别
        center: [104.10194, 30.65984], //初始化地图中心点位置
      });

      let toolBar = new AMap.ToolBar({
        position: {
          top: "110px",
          right: "40px",
        },
      });
      let controlBar = new AMap.ControlBar({
        position: {
          top: "10px",
          right: "10px",
        },
      });
      this.map.addControl(new AMap.Scale());
      this.map.addControl(toolBar);
      this.map.addControl(controlBar);
      this.map.setDefaultCursor("pointer");

      // this.setClusterMraker();
    },
    treeTableSelected(val) {
      this.isCompany = val == "first" ? true : false;
      if (this.markerClusterer) {
        this.markerClusterer.setMap(null);
      }
      this.$refs.wolrdmap.clearMarkers();
    },

    setClusterMraker(val) {
      let arr = [
        {
          lnglat: [104.10194, 30.65984],
          extData: { carNo: "1213", name: "张三" },
        },
        {
          lnglat: [104.1018, 30.65984],
          extData: { carNo: "1214", name: "李四" },
        },
        {
          lnglat: [104.09, 30.65984],
          extData: { carNo: "1214", name: "李四" },
        },
        {
          lnglat: [104.08, 30.65984],
          extData: { carNo: "1214", name: "李四" },
        },
      ];
      arr = val;
      if (this.markerClusterer) {
        this.markerClusterer.setMap(null);
      }
      // 此处为点聚合
      this.markerClusterer = new AMap.MarkerCluster(this.map, arr, {
        gridSize: 100,
        // renderClusterMarker: renderClusterMarker, // 自定义聚合点样式
        renderMarker: this.renderMarker, // 自定义非聚合点样式
      });

      this.map.setCenter(arr[0].lnglat, true);
      //添加聚合点点击事件
      this.markerClusterer.on("click", (data) => {
        // console.log(data);
        let canBoost = false;
        //判断是否是聚合点，不是聚合点就执行单个点击方式
        if (data.clusterData.length > 1) {
          canBoost = true;
        } else {
          data.clusterData.forEach((item) => {
            if (item._amapMarker.count > 1) {
              canBoost = true;
            }
            return;
          });
        }

        //计算所有聚合点的中心点
        let alng = 0,
          alat = 0;
        for (const m of data.clusterData) {
          alng += m.lnglat.lng;
          alat += m.lnglat.lat;
        }
        const lat = alat / data.clusterData.length;
        const lng = alng / data.clusterData.length;
        //以中心点固定倍数放大地图，达到展开聚合点的效果
        if (canBoost) {
          let level = this.map.getZoom();
          this.map.setZoom(level + 2);
          this.map.setCenter([lng, lat]);
        }
      });
    },

    renderMarker(context) {
      const marker = context.marker;
      const item = context.data[0].extData;
      // item.defaultIcon
      let icon = new AMap.Icon({
        // image:"https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
        image: item.defaultIcon,
        size: new AMap.Size(50, 50),
        imageSize: new AMap.Size(50, 50),
      });
      let label = {
        content:
          "<div style='height:14px;padding:2px;border:1px solod blue;'><span style='background:#f39c12;color:#fff;'>" +
          item["hbCarNo"] +
          "</span></div>",
        offset: new AMap.Pixel(0, -10),
        direction: "top",
      };

      marker.setIcon(icon);
      marker.setLabel(label);

      // 给点添加点击事件
      let that = this;
      marker.on("click", (e) => {
        // console.log(e, item);
        this.popdata = item;
        let infoWindow = new AMap.InfoWindow({
          isCustom: true, //使用自定义窗体
          autoMove: true,
          closeWhenClickMap: true,
          content: that.$refs.pop,
          size: new AMap.Size(12, 12),
          offset: new AMap.Pixel(16, -45),
          // position: marker.getPosition(),
          retainWhenClose: true,
        });

        infoWindow.open(this.map, e.target.getPosition());
      });
    },

    toData(val) {
      console.log("接受值", val);
      let arr = val;
      if (arr.length <= 0) {
        if (this.nowMap == 1) {
          if (this.markerClusterer) {
            this.markerClusterer.setMap(null);
          }
          this.map.clearMap();
        } else if (this.nowMap == 2) {
          this.$refs.wolrdmap.clearMarkers();
        }
      } else {
        this.companyTableData = arr.map((item, i) => {
          let obj = {};
          item.showde = false;
          item.defaultIcon = item.defaultIcon;
          obj.extData = item;
          obj.lnglat = [item.gdLng, item.gdLat];
          return obj;
        });

        console.log("===========聚合数组", this.companyTableData);
        if (this.nowMap == 1) {
          this.setClusterMraker(this.companyTableData);
        } else if (this.nowMap == 2) {
          this.$refs.wolrdmap.TmapSetClusterMraker(val);
        }
      }

      this.$refs.companyTable.getdata(val);
    },

    getBaseTableClicked(e) {
      // console.log(e);

      if (this.nowMap == 2) {
        this.$refs.wolrdmap.clickbMap(e);
        return false;
      }
      this.popdata = e;
      // this.popdata.show = true;
      var position = new AMap.LngLat(e.gdLng, e.gdLat);
      let infoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        autoMove: true,
        closeWhenClickMap: true,
        content: this.$refs.pop,
        size: new AMap.Size(12, 12),
        offset: new AMap.Pixel(16, -45),
        position: position,
        retainWhenClose: true,
      });
      infoWindow.open(this.map, position);
      this.map.setCenter(position);
      this.map.setZoom(16);
    },
    getAreaTableClicked(e) {
      // console.log(e);

      if (this.nowMap == 2) {
        this.$refs.wolrdmap.clickbMap(e);
        return false;
      }
      this.popdata = e;
      // this.popdata.show = true;
      var position = new AMap.LngLat(e.gdLng, e.gdLat);
      let infoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        autoMove: true,
        closeWhenClickMap: true,
        content: this.$refs.pop,
        size: new AMap.Size(12, 12),
        offset: new AMap.Pixel(16, -45),
        position: position,
        retainWhenClose: true,
      });
      infoWindow.open(this.map, position);
      this.map.setCenter(position);
      this.map.setZoom(19);
    },

    // 轨迹被点击
    trajectory() {
      let obj = {
        show: true,
        configId: this.popdata.configId,
      };
      if (this.nowMap == 1) {
        obj.mapType = "GMAP";
      } else if (this.nowMap == 2) {
        obj.mapType = "TMAP";
      }
      this.$refs.trajectoryDialog.show(obj);
      this.toTraCode = this.popdata.hbCarNo;
      // this.toTraCode = this.popdata.hashId;
    },
    // 定位被点击
    track() {
      let obj = this.popdata;
      if (this.nowMap == 1) {
        obj.mapType = "GMAP";
      } else if (this.nowMap == 2) {
        obj.mapType = "TMAP";
      }
      obj.show = true;

      this.$refs.trackingDialog.init(obj);
      this.toTraCode = this.popdata.hbCarNo;
      // this.toTraCode = this.popdata.hashId;
    },
    // 视频被点击
    video() {
      this.toEditCode = this.popdata.hbCarNo;
      // this.$refs.videosDialog.init();
    },

    getworkCar(val) {
      // console.log("=======>", val);
      this.allCarNum = val.allCarNum;
      this.notWorkNum = val.notWorkNum;
      this.workNum = val.workNum;
      this.notWorkOtherNum = val.notWorkOtherNum;
      if (this.notWorkOtherNum.length <= 0) {
        if (this.nowMap == 1) {
          this.map.clearMap();
        }
      }
      this.getallCarNum(this.allCarNum);
    },
    areaExportData(e) {
      this.$refs.areaTable.getAreaExport(e);
    },
    //区域车辆点击数量
    getallCarNum(val) {
      // this.$store.commit("changeAreaSearchCar", this.allCarNum);

      this.$refs.areaTable.getdata(val);

      let arr = val;
      let clusterMraker = arr.map((item, i) => {
        let obj = {};
        item.showde = false;
        item.defaultIcon = item.defaultIcon;
        obj.extData = item;
        obj.lnglat = [item.gdLng, item.gdLat];
        return obj;
      });
      if (this.nowMap == 1) {
        if (clusterMraker.length >= 1) {
          this.map.setZoom(5);
        }
        this.setClusterMraker(clusterMraker);
      } else if (this.nowMap == 2) {
        this.$refs.wolrdmap.TmapSetClusterMraker(val);
      }
    },
    //地图分类点击按钮
    carTypeBtn(val) {
      this.carByType = val;
      let data = {
        typeIds: val,
      };
      this.$refs.treeComponent.getCarInfo(data);
      // alert(val)
    },
    // 地图选择
    mapchoose(val) {
      this.nowMap = val;
    },
    carFrame(val) {
      // console.log("====地图传出===>", val);
      this.popdata = val;
      // this.popdata.show = true;
    },
  },
};
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}
.container {
  height: calc(100vh - 80px);
  width: 100%;
  .left {
    width: 300px;
    height: 64%;
    // background: #ccc;
    position: relative;
    .leftBtn {
      width: 40px;
      height: 20px;
      position: absolute;
      top: 10px;
      right: 20px;
      z-index: 1;
    }
  }
  .bottom {
    height: calc(36% - 10px);
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0px;
    // border: 1px solid red;
    // background: #ccc;
    // z-index: 1;
    .btnBox {
      position: absolute;
      right: 15px;
      top: 10px;
    }
  }
  .bottomBtn {
    height: 30px;
    width: 30px;
    background: #fff;
    border-radius: 4px;
    position: absolute;
    bottom: 20px;
    right: 20px;
  }
  .leftshowBtn {
    height: 30px;
    width: 30px;
    background: #fff;
    border-radius: 4px;
    position: absolute;
    top: 20px;
    left: 20px;
  }
  .mapBox {
    height: 64%;
    width: calc(100% - 300px);
    .mapBtn-car {
      position: absolute;
      left: 70px;
      top: 20px;
      z-index: 999;
      .button {
        margin-left: 1px !important;
      }
    }
    .mapBtn-totle {
      position: absolute;
      right: 60px;
      bottom: 20px;
      z-index: 999;
      padding: 4px 18px;
      background: #fff;
      .car-num {
        font-size: 12px;
      }
    }
  }
  .mapBox.leftShow {
    width: 100%;
  }
  .mapBox.bottomShow {
    height: 100%;
  }
  .mapBox.leftShow.bottomShow {
    width: 100%;
    height: 100%;
  }
  .markerStyle {
    display: flex;
    font-size: 12px;
    background: #ebe9e5;
    padding: 15px 12px !important;
    line-height: 18px !important;
    border-radius: 5px;
    box-shadow: 1px 3px 8px #555 !important;
    box-sizing: border-box;

    .btns {
      display: flex;
      .fz22 {
        font-size: 22px;
      }
    }
  }
}
.flex-cener {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
